<template>
  <div>
      <el-tree
        :data="menus"
        show-checkbox
        node-key="id"
        :props="defaultProps"
        ref="tree"
        >
        
      </el-tree>
      <el-button @click="getCheckedNodes">通过node获取</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menus:[],
      defaultProps:{
        label:'name',
        children:'children',
      }
    }
  },
  created() {
    this.menus=[...this.$router.options.routes]
    // 权限管理和动态路由的思路： 根据不同的用户登录上来，返回对象的路由权限菜单
    // 一般可以通过树形控件达到权限的精准控制，根据不同的角色所拥有的菜单数据，最终进行动态的渲染展示
    // 动态路由添加用router.addRoutes()(3.x版本已废弃 用router.addRoute())
  },
  methods: {
        getCheckedNodes() {
            let arr = this.$refs.tree.getCheckedNodes()
            console.log(arr)
        }
    }
}
</script>

<style>

</style>